<template>
  <n-config-provider :locale="zhCN" :date-locale="dateZhCN" :theme-overrides="themeOverrides">
    <n-loading-bar-provider :loading-bar-style="loadingBarStyle">
      <x-loading-content />
      <n-dialog-provider>
        <x-dialog-content />
        <n-notification-provider>
          <n-message-provider>
            <x-message-content />
            <slot />
          </n-message-provider>
        </n-notification-provider>
      </n-dialog-provider>
    </n-loading-bar-provider>
  </n-config-provider>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import {
    NDialogProvider,
    NNotificationProvider,
    NMessageProvider,
    NLoadingBarProvider,
    NConfigProvider,
    zhCN,
    dateZhCN
  } from 'naive-ui'
  import { XMessageContent } from '@/components/x-message-content'
  import { XDialogContent } from '@/components/x-dialog-content'
  import { XLoadingContent } from '@/components/x-loading-content'

  export default defineComponent({
    name: 'XApplication',
    components: {
      NDialogProvider,
      NNotificationProvider,
      NMessageProvider,
      NLoadingBarProvider,
      NConfigProvider,
      XMessageContent,
      XDialogContent,
      XLoadingContent
    },
    setup() {
      const themeOverrides = {
        // common: {
        //   primaryColor: '#16BC96',
        //   primaryColorHover: 'rgba(22, 188, 150, .8)',
        //   primaryColorPressed: '#16BC96',
        //   primaryColorSuppl: 'rgba(22, 188, 150, .8)',
        //   successColor: '#22B46B',
        //   // infoColor: '#999999',
        //   infoColor: '#536FFF',
        //   warningColor: '#FDAA29',
        //   errorColor: '#FD494D',
        //   textColorBase: '#1F2225',
        //   textColorDisabled: '#888'
        // }
        common: {
          primaryColor: '#409eff',
          primaryColorHover: 'rgba(64,158,255, .9)',
          primaryColorPressed: '#409eff',
          primaryColorSuppl: 'rgba(64,158,255, .9)',
          successColor: '#22B46B',
          // infoColor: '#999999',
          infoColor: '#409eff',
          warningColor: '#FDAA29',
          errorColor: '#FD494D',
          textColorBase: '#1F2225',
          textColorDisabled: '#888'
        }
      }
      const loadingBarStyle = {
        loading: {
          'background-color': '#54BC2B',
          height: '3px'
        }
      }
      return {
        zhCN,
        dateZhCN,
        themeOverrides,
        loadingBarStyle
      }
    }
  })
</script>
<style></style>
